<template>
  <van-form @submit="onSubmit">
    <div style="text-align: center; margin-top: 10rem">
      <svg
        t="1690861738937"
        class="icon"
        viewBox="0 0 1324 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6850"
        width="100"
        height="100"
      >
        <path
          d="M447.708881 423.399778a19.447613 19.447613 0 0 0 16.55116-14.068486l45.929469-152.891341a20.68895 20.68895 0 0 0-38.274558-11.378923l-32.688541 109.651436-31.654094-52.963713a20.68895 20.68895 0 0 0-34.343657 0l-31.654094 52.963713-32.688541-109.651436a20.68895 20.68895 0 1 0-38.274557 11.378923l45.722579 152.891341a20.68895 20.68895 0 0 0 16.75805 14.068486h2.482674A20.68895 20.68895 0 0 0 351.712152 413.882861l38.688337-62.06685 37.860778 62.06685a19.447613 19.447613 0 0 0 19.447614 9.516917zM599.979553 423.399778h2.482675A20.68895 20.68895 0 0 0 620.668504 413.882861l37.446999-62.06685 37.860779 62.06685a20.68895 20.68895 0 0 0 36.205663-4.551569l45.72258-152.891341a20.68895 20.68895 0 1 0-38.067669-11.378923l-32.89543 109.651436-31.654094-52.963713a20.68895 20.68895 0 0 0-17.171829-9.723806 20.68895 20.68895 0 0 0-16.964939 9.723806l-31.654093 52.963713-32.895431-109.651436a20.68895 20.68895 0 1 0-38.274558 11.378923l45.929469 152.891341a20.68895 20.68895 0 0 0 15.723602 14.068486zM1032.378611 231.61321a20.68895 20.68895 0 0 0-24.82674 13.447818l-32.895431 109.651436-31.654094-52.963713a20.68895 20.68895 0 0 0-34.136767 0l-31.654094 52.963713-32.895431-109.651436a20.68895 20.68895 0 0 0-24.82674-13.447818 20.68895 20.68895 0 0 0-13.240928 24.826741l45.72258 152.891341a20.68895 20.68895 0 0 0 36.205663 4.551569l37.860778-62.06685 37.65389 62.06685a20.68895 20.68895 0 0 0 17.171828 9.723806h2.482674a20.68895 20.68895 0 0 0 16.55116-14.068486l45.92947-152.891341a20.68895 20.68895 0 0 0-13.447818-25.03363zM415.847897 536.361446a20.68895 20.68895 0 0 0-20.68895-20.68895H289.645302a20.68895 20.68895 0 0 0-20.68895 20.68895v106.341203a20.68895 20.68895 0 0 0 20.68895 20.68895h106.341203a20.68895 20.68895 0 0 0 20.68895-20.68895z m-39.929673 86.479811H310.334252v-66.41153h66.20464zM395.986505 703.528163H289.645302a20.68895 20.68895 0 0 0-20.68895 20.68895v103.44475a20.68895 20.68895 0 0 0 20.68895 20.68895h106.341203a20.68895 20.68895 0 0 0 20.68895-20.68895v-105.306756a20.68895 20.68895 0 0 0-20.68895-18.826944z m-20.68895 106.134314H310.334252v-67.445978h66.20464zM1026.585705 569.670655h-79.652458a20.68895 20.68895 0 0 0 0 39.722785h79.652458a20.68895 20.68895 0 1 0 0-39.722785zM867.280789 569.670655H475.845853a20.68895 20.68895 0 0 0 0 39.722785h391.434936a20.68895 20.68895 0 1 0 0-39.722785zM1026.585705 755.457427h-79.652458a20.68895 20.68895 0 0 0 0 39.929674h79.652458a20.68895 20.68895 0 1 0 0-39.929674zM867.280789 755.457427H475.845853a20.68895 20.68895 0 0 0 0 39.929674h391.434936a20.68895 20.68895 0 0 0 0-39.929674z"
          p-id="6851"
          fill="#d81e06"
        ></path>
        <path
          d="M301.438003 976.001636H75.100889a27.516304 27.516304 0 0 1-27.309414-27.309414V75.204747a27.516304 27.516304 0 0 1 27.309414-27.309414H926.864965a23.999182 23.999182 0 1 0 0-47.791474H75.100889A75.307778 75.307778 0 0 0 0 67.136057v889.624855a75.514668 75.514668 0 0 0 74.68711 67.239088h226.750893a23.999182 23.999182 0 0 0 0-47.998364zM1324.092808 67.136057A75.307778 75.307778 0 0 0 1248.991919 0.103859H1022.654804a23.999182 23.999182 0 1 0 0 47.791474h226.337115a27.516304 27.516304 0 0 1 27.309414 27.309414v873.487475a27.516304 27.516304 0 0 1-27.309414 27.309414H397.227842a23.999182 23.999182 0 1 0 0 47.998364h851.764077A75.514668 75.514668 0 0 0 1324.092808 956.760912v-889.624855z"
          p-id="6852"
          fill="#d81e06"
        ></path>
      </svg>
    </div>
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="注册"
        label="注册"
        placeholder="注册"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="phone"
        name="手机"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        color="rgb(163,38,38)"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { createApp } from 'vue';
import { Form, Field, CellGroup } from 'vant';
import { ref } from 'vue';
import { register } from '@/service';

const app = createApp();
app.use(Form);
app.use(Field);
app.use(CellGroup);

const username = ref('');
const password = ref('');
const phone = ref('');
const onSubmit = async () => {
  const res = await register({
    password: password.value,
    phone: phone.value,
    name: username.value,
    project_id: 1,
  });
  console.log(res);
  console.log('submit', phone);
};
</script>

<style lang="scss" scoped></style>
